import React from 'react'
import {WingBlank} from "antd-mobile"
import './UserMsg.css'
import LvMark from "../../../../../../../shared-components/LvMark/LvMark";
import VIPIcon from "../../../../../../../res/images/web/my/vip kim@2x.png"
import LocalStorageService from "../../../../../../../utils/LocalStorageService";
const UserMsg = props => {

    const {userMsg,} = props
    const {nickname, viplevel, msg, uid, vip} = userMsg
    const isVip = vip > 0
    const currentUserId = localStorage.getItem('userid')
    const isMe = uid === currentUserId
    // const storage = LocalStorageService
    // const meColor = '#337CFF'
    const textStyle = {
        fontWeight: isMe ? 600 : 'normal',
        color: isVip ? 'rgb(250,114,104)' : 'rgb(43, 138, 247)',
    }


    const t = (
        <WingBlank>
            <div className='g-r-c-r-dialogue-user-msg-c'>

                <div className='flex-center-align-center' style={{height: 24}}>
                    <LvMark lv={viplevel}/>
                    {isVip ? <img alt='' src={VIPIcon} style={{width: '34px',}}/> : null}
                    <span className='g-r-c-r-dialogue-user-msg-name'
                          style={textStyle}
                    >{isMe ? '我' : nickname}:</span>
                </div>

                <span className='g-r-c-r-dialogue-user-msg-text'>{msg}</span>
            </div>
        </WingBlank>
    )

    return t
}

export default UserMsg
